<template>
  <div>
    <div style="padding:0 24px;">
      <a-row style="margin-bottom: 24px;" type="flex" align="middle" justify="space-between">
        <a-col class="tit">
          数据预览
        </a-col>
        <a-col class="tit">
          数据异常：
          <span>{{ errorCount }}</span>
          <a-button style="margin-left:14px;" @click="$emit('onAction', 3)" :disabled="errorCount <= 0">处理异常</a-button>
        </a-col>
      </a-row>
      <div class="xq-form-wrapper">
        <a-spin :spinning="spinning" class="xq-form-content">
          <a-table :scroll="{ x: columns.length * 70 }" :pagination="false" :dataSource="tableData" :columns="columns" bordered />
          <div class="xq-form-content-pagination">
            <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
            <a-pagination
              v-model="pageNo"
              :page-size="pageSize"
              :total="total"
              :show-size-changer="true"
              :show-quick-jumper="true"
              :page-size-options="['10', '20', '50', '100']"
              @change="onPageChange"
              @showSizeChange="onPageSizeChange"
            />
          </div>
        </a-spin>
      </div>
    </div>
    <div class="preview-btn">
      <a-button style="margin-right:12px;" @click="$emit('onAction', 1)">重新上传</a-button>
      <a-button type="primary" @click="onSubmit">
        数据同步
      </a-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getAttendanceDataTempAllAndError, getCalculateSalary } from "../api";

export default {
  props: {
    talentPoolTempId: {
      type: String,
      default: ""
    },
    vJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      columns: [],
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      errorDataCount: 0,
      errorCount: 50,
      attendanceDataRecordId: ""
    };
  },
  created() {
    this.onGetAttendanceDataTempAllAndError();
  },
  methods: {
    async onGetAttendanceDataTempAllAndError() {
      try {
        this.spinning = true;
        const { data } = await getAttendanceDataTempAllAndError({
          recordId: this.vJson.recordId,
          tempId: this.vJson.tempId,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        });
        this.attendanceDataRecordId = data.attendanceDataRecordId;
        this.columns = this.columnsFun(data.headData);
        this.tableData = this.tableDataFun(data.allData);
        this.total = data.allDataCount;
        this.errorCount = data.errorDataCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    columnsFun(data) {
      const columnsDef = [
        {
          title: "姓名",
          dataIndex: "k.0.key",
          width: 100
        },
        {
          title: "手机号",
          dataIndex: "k.1.key",
          width: 150
        }
      ];
      const columns = [];
      const headDataLength = data.length;
      const num = data.length * 31 + 2;
      const result = [];
      const columns2 = [];
      for (let i = 0; i < num; i++) {
        if (i > 1) {
          const json = {
            title: "",
            dataIndex: `k.${i}.key`,
            width: 100
          };
          columns.push(json);
        }
      }
      for (let i = 0, len = columns.length; i < len; i += headDataLength) {
        result.push(columns.slice(i, i + headDataLength));
      }
      result.forEach((e, i) => {
        e.forEach((x, y) => {
          x.title = data[y];
        });
        columns2.push({
          title: i + 1,
          children: e
        });
      });
      return columnsDef.concat(columns2);
    },
    tableDataFun(data) {
      const allData = data;
      for (let i = 0; i < allData.length; i++) {
        const arr = [];
        const e = allData[i];
        for (let i = 0; i < e.length; i++) {
          e[i] = JSON.parse(e[i]);
          const json = {};
          for (const key in e[i]) {
            json.key = key === "null" ? "--" : key;
            json.val = e[i][key];
          }
          arr.push(json);
        }
        allData[i] = { k: arr };
      }
      return allData;
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetAttendanceDataTempAllAndError();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetAttendanceDataTempAllAndError();
    },
    handleClose() {
      this.alertiVisible = false;
      this.$router.push({
        name: "talentAbnormal",
        query: { talentPoolTempId: this.talentPoolTempId }
      });
    },
    onSubmit() {
      this.onGetCalculateSalary();
    },
    async onGetCalculateSalary() {
      try {
        await getCalculateSalary(this.attendanceDataRecordId);
        this.$emit("onActionS", 1);
        this.$notification.success({ message: "操作成功" });
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tit {
  font-size: 16px;
  font-weight: 500;
  color: #252525;
  span {
    color: #fa5051;
  }
}
.preview-btn {
  width: 100%;
  height: 40px;
  line-height: 62px;
  text-align: right;
  border-top: 1px solid #e8e8e8;
  margin-top: 20px;
  padding-right: 24px;
}
.tags {
  display: flex;
  div {
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    margin-right: 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
}
</style>
